<template>
  <div>

    <!-- <img src="../assets/images/envelope.png"  @click="todo"/> -->
    <svg-icon size="small" icon-class="email" @click="goto" />
    <!-- <sup style="color:red">({{ this.list }})</sup> -->
    <!-- <el-button plain icon="el-icon-bell" size="mini"> -->
    <!-- <sup style="color:red">({{ count }})</sup> -->
    <!-- </el-button> -->
    <el-badge :value="count" :hidden="isHidden" :max="99" class="item" v-show="count > 0">
      <!-- <div>{{ count }}</div> -->
      <!-- <div>{{ counter }}</div> -->

    </el-badge>



    <!-- {{ this.list }} -->
  </div>
</template>

<script>
function debounce(fn, wait = 500) {
  var timeout = null
  return function () {
    if (timeout != null) {
      clearTimeout(timeout)
    }
    timeout = setTimeout(fn, wait)
  }
}

import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

import user from '@/store/modules/user'
import { myReceiveList, mySendList, listRemind, getRemind, delRemind, addRemind, updateRemind, myReceiveListCount } from "@/api/edit/remind";
export default {
  name: 'RuoYiGit',
  data() {
    return {
      isHidden: true,
      list: '',
      url: 'https://gitee.com/y_project/RuoYi-Vue'
    }
  },
  // computed: {
  //   list() {
  //     return user.state.list;
  //   },
  // },

  computed: {
    // count() {
    //   return user.state.list; // 方式一
    // },
    // ...mapState({ // 方式二，最好的方式是使用对象形式
    //   // counter: "count"  // 别名
    //   counter: state => user.state.list
    // }),
    // ...mapState(["count"]),
    ...mapState({
      count: (state) => user.state.noticeCount, //直接拿到count数量
    })

  },
  created() {
    // this.getList();
    this.Remind()
    // if (localStorage.getItem("list")) {
    //   this.list = JSON.parse(localStorage.getItem("list"))
    //   if (this.list !== 0) {
    //     this.isHidden = false
    //   }
    // }
  },
  watch: {
    // 监听复选框配置列所有的变化
    count: {
      handler: function (newnew, oldold) {
        // console.log(newnew); 
        // this.list = this.count
        if (this.count !== 0) {
          this.isHidden = false
        }
      },
      deep: true,
      immediate: true
    },

  },
  methods: {
    // inputSearch
    // Remind: debounce(() => {
    // {
    Remind() {
      // console.log(JSON.stringify(this.$store.state.list));
      // myReceiveListCount().then(res => {
      //   // console.log(JSON.stringify(this.list));


      //   this.count = res
      //   if (this.count !== 0) {
      //     this.isHidden = false
      //   }

      // })
    },

    // }
    // })

    goto() {
      // window.open(this.url)
      this.$router.push({ path: '/remind/remind' })
    }
  }
}
</script>
<style lang="scss" scoped>
// .el-badge {

//   ::deep .el-badge__content {

//     margin-top: 0
//   }

// }
</style>